<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的收藏</title>
		<script type="text/javascript" src="../js/zepto.min.js"></script>
		
		<link rel="stylesheet" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/head.css"/>
		<link rel="stylesheet" type="text/css" href="../css/shoucang24.css"/>
		
	</head>
	<body>
		<!--头部-->
	    <div class="head">
    			<a href="fifty-mine.html">
            		<img src="../img/left_fan.png" alt="" class="img_fan"/>
            </a>
        <h2>我的收藏</h2>
        <a href="shoucang23.html">取消编辑</a>
    </div>
	    <!--视频攻略-->
	    <div class="video">
	    		<a href="###" class="colorA">视频</a>
	    		<a href="###" class="colorB">攻略</a>
	    </div>
	<div class="windows">
	 	<div class="big_div clearfix">
	 	<div class="left-dd">
	    	<ul class="uls">
		    	<li>
		    		<div class="unCheck">
		    		</div>
		    		<div class="divCheck">
		    		</div>
		    		<div>僵尸大战终极副本53关攻略关通关视频0</div>
		    		<span>更新时间:2015.2.15</span>
		    	</li>
		    	<li>
		    		<div class="unCheck">
		    		</div>
		    		<div class="divCheck">
		    		</div>
		    		<div>僵尸大战终极副本53关攻略关通关视频1</div>
		    		<span>更新时间:2015.2.15</span>
		    	</li>
		    	<li>
		    		<div class="unCheck">
		    		</div>
		    		<div class="divCheck">
		    		</div>
		    		<div>僵尸大战终极副本53关攻略关通关视频2</div>
		    		<span>更新时间:2015.2.15</span>
		    	</li>
		 	<li>
		    		<div class="unCheck">
		    		</div>
		    		<div class="divCheck">
		    		</div>
		    		<div>僵尸大战终极副本53关攻略关通关视频3</div>
		    		<span>更新时间:2015.2.15</span>
		    	</li>
		  	<li>
		    		<div class="unCheck">
		    		</div>
		    		<div class="divCheck">
		    		</div>
		    		<div>僵尸大战终极副本53关攻略关通关视频4</div>
		    		<span>更新时间:2015.2.15</span>
		    	</li>
	    </ul>
	    <div class="allChoose">
		    <div>
			    	<img src="../img/choose.png" class="img_u"/>
			    <div class="only_one"><img src="../img/duihao.png"/></div>
		    </div>
		    
		    <span class="allSpan">全选</span>
	    </div>
	    <div class="allDelete">
	    		<div class="footer_left">取消选择</div>
	    		<div class="footer_right">一键取消收藏</div>
	    </div>
	    </div>
	    
	    <!--攻略-->
	    <div class="right-dd">
	    <ul class="uls1 clearfix">
	<li>
		<div class="unCheck1">
		</div>
		<div class="divCheck1">
		</div>
		<div>僵尸大战终极副本53关攻略关通关视频0</div>
		<span>更新时间:2015.2.15</span>
	</li>
	<li>
		<div class="unCheck1">
		</div>
		<div class="divCheck1">
		</div>
		<div>僵尸大战终极副本53关攻略关通关视频1</div>
		<span>更新时间:2015.2.15</span>
	</li>
	<li>
		<div class="unCheck1">
		</div>
		<div class="divCheck1">
		</div>
		<div>僵尸大战终极副本53关攻略关通关视频2</div>
		<span>更新时间:2015.2.15</span>
	</li>
	<li>
		<div class="unCheck1">
		</div>
		<div class="divCheck1">
		</div>
		<div>僵尸大战终极副本53关攻略关通关视频3</div>
		<span>更新时间:2015.2.15</span>
	</li>
	<li>
		<div class="unCheck1">
		</div>
		<div class="divCheck1">
		</div>
		<div>僵尸大战终极副本53关攻略关通关视频4</div>
		<span>更新时间:2015.2.15</span>
	</li>
</ul>
<div class="allChoose1">
	<div>
		<img src="../img/choose.png" class="img_u1" />
		<div class="only_one1"><img src="../img/duihao.png" /></div>
	</div>

	<span class="allSpan1">全选</span>
</div>
<div class="allDelete1">
	<div class="footer_left1">取消选择</div>
	<div class="footer_right1">一键取消收藏</div>
</div>
	    </div>
	   </div>
	 </div>
	</body>
	<script type="text/javascript" src="../js/touch-0.2.14.min.js"></script>
	<script type="text/javascript">
		var uls = document.getElementsByClassName('uls')
		function numberorder(a, b) { return a - b; }
		var alone = false;
		var bule = false;
		var index;
		var att = [];
		var child = uls[0].children;
		$('.divCheck').hide();
		$('.divCheck').click(function(){
			$(this).hide();
			$(this).parent().children('.unCheck').show()
			alone = false;
		})
		
		$('.unCheck').click(function(){
			alone = true;
			$(this).hide()
			$(this).parent().children('.divCheck').show()
			index= $(this).parent().index();
			att.push(index);	
			att.sort(numberorder);
		})
		$('.allChoose').click(function(){
			$('.only_one').show()
			$('.img_u').hide()
			$('.unCheck').hide()
			$('.divCheck').show()
			bule = true;
		})
		$('.footer_left').click(function(){
			$('.only_one').hide()
			$('.img_u').show()
			$('.unCheck').show()
			$('.divCheck').hide()
			bule =false;
			alone=false;
		})
		$('.footer_right').click(function(){
			if (bule) {
				
				$('.uls').remove()
				$('.allChoose').remove()
				$('.allSpan').remove()
			}
			if (alone) {				
				for (var i = 0;i<att.length;i++) {
					if (i==0) {
						child[att[i]].remove()
					}else{
						child[att[i]-i].remove()
					}
				}
			}
			att=[];	
	})
		
		var uls1 = document.getElementsByClassName('uls1')
		var alone1 = false;
		var bule1 = false;
		var index1;
		var att1 = [];
		var child1 = uls1[0].children;
		$('.divCheck1').hide()
		$('.divCheck1').click(function(){
			$(this).hide();
			
			$(this).parent().children('.unCheck1').show()
			alone1 = false;
		})
		$('.unCheck1').click(function(){
			alone1 = true;
			$(this).hide()
			$(this).parent().children('.divCheck1').show()
			index1= $(this).parent().index();
			att1.push(index1);	
			att1.sort(numberorder);
		})
		$('.allChoose1').click(function(){
			$('.only_one1').show()
			$('.img_u1').hide()
			$('.unCheck1').hide()
			$('.divCheck1').show()
			bule1 = true;
			
		})
		$('.footer_left1').click(function(){
			$('.only_one1').hide()
			$('.img_u1').show()
			$('.unCheck1').show()
			$('.divCheck1').hide()
			bule1 =false;
			alone1 = false;
		})
		$('.footer_right1').click(function(){
			if (bule1) {
				$('.uls1').remove()
				$('.allChoose1').remove()
				$('.allSpan1').remove()
			}
			if (alone1) {				
				for (var i = 0;i<att1.length;i++) {
					if (i==0) {
						child1[att1[i]].remove()
					}else{
						child1[att1[i]-i].remove()
					}
				}
			}
			att1=[];	
	})	
		
		var videobure = true; 
		$('.video a').click(function(){
			$('.video a').eq(0).css({
				borderBottom: "4px solid #fff",
				color: "#000"
			})
			$('.video a').eq(1).css({
				borderBottom: "4px solid #fff",
				color: "#000"
			})
			$(this).css({
				borderBottom: '4px solid #d92a2a',
				color: '#d92a2a'
			})
			if (videobure) {
				$('.big_div').addClass('donghua_3')
				$('.big_div').removeClass('donghua_4')
				videobure = false;
			}else{
				$('.big_div').addClass('donghua_4')
				$('.big_div').removeClass('donghua_3');
				videobure = true; 
			}
		})
		
		
	</script>
</html>
